<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                >新增</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="carouselList">
                                                                                <el-table-column label="主键" align="center" prop="id" />
                                                                                              <el-table-column label="图片列表" align="center" prop="pic" width="180">
                    <template slot-scope="scope">
                      <div v-if="!scope.row.pic">暂无图像</div>
                      <div v-else>
                        <el-image
                            style="width: 50px; height: 50px"
                            :src="scope.row.pic"
                            :preview-src-list="[scope.row.pic]">
                        </el-image>
                      </div>

                    </template>
                  </el-table-column>
                                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                    >修改</el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

      <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          :page-sizes="[10,20,50]"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />

        <!-- 添加或修改轮播图对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                                                                                                                                                                                                                    <el-form-item label="图片列表">
                                    <imageUpload v-model="form.pic"/>
                                </el-form-item>
                                                                                                                    </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { listCarousel, getCarousel, delCarousel, addCarousel, updateCarousel } from "@/api/project/carousel";

    export default {
        name: "Carousel",
                data() {
            return {
                loading: true,
                                // 总条数
                total: 0,
                // 轮播图表格数据
                    carouselList: [],
                                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                                                                                                        // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                                                                            pic: null
                                    },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                                                                                                    }
        };
        },
        created() {
            this.getList();
        },
        methods: {
          handlePageChange(currentPage) {
            this.queryParams.pageNum = currentPage
            this.getList()
          },
          handleSizeChange(pageSize) {
            this.queryParams.pageSize = pageSize
            this.getList()
          },
            /** 查询轮播图列表 */
            getList() {
                this.loading = true;
                                                                                                                                                                                                listCarousel(this.queryParams).then(response => {
                    let list, start, end
                    start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
                    end = start + this.queryParams.pageSize
                    list = response.data.filter((item, index) => {
                      return index >= start && index < end
                    })
                    this.carouselList = list;
                    this.total = response.data.length;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                                                            id: null,
                                                                                pic: null
                                                };
                                // this.resetForm("form");
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加轮播图";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                getCarousel(row).then(response => {
                    this.form = response.data;
                                                                                                                                                    this.open = true;
                    this.title = "修改轮播图";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                                                                                                                                                                        if (this.form.id != null) {
                            updateCarousel(this.form).then(response => {
                                this.$message.success("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addCarousel(this.form).then(response => {
                                this.$message.success("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                this.$confirm('是否确认删除？').then(function() {
                    return delCarousel(row);
                }).then(() => {
                    this.getList();
                    this.$message.success("删除成功");
                }).catch(() => {});
            },
    }
    };
</script>
